<script setup>
	import {
		ref
	} from 'vue';
	import {
		deepseek
	} from "@/http";
	import {
		ElMessage
	} from "element-plus";
	const inputText = ref('');
	const outputText = ref('');
	const selectedModel = ref('deepseek-v3');

	// const generateText = async () => {
	// 	if (inputText.value.trim() === "") {
	// 		ElMessage.warning("请输入问题描述！");
	// 	} else {
	// 		try {
	// 			const response = await deepseek(
	// 				'/deepseek/ask', {
	// 					asker: inputText.value,
	// 					moxing: selectedModel.value
	// 				});
	// 			outputText.value = response.data.message;
	// 			ElMessage.success("请求成功");
	// 		} catch (error) {
	// 			ElMessage.warning("请求失败");
	// 		}
	// 	}
	// };
	const generateText = async () => {
		if (inputText.value.trim() === "") {
			ElMessage.warning("请输入问题描述！");
		} else {
			try {
				outputText.value = ""; // 清空旧内容
				const response = await fetch('http://localhost:8087/deepseek/ask', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						asker: inputText.value,
						moxing: selectedModel.value
					})
				});

				// 流式读取
				const reader = response.body.getReader();
				const decoder = new TextDecoder();

				while (true) {
					const {
						done,
						value
					} = await reader.read();
					if (done) {
						ElMessage.success("请求完成");
						break;
					}
					const chunk = decoder.decode(value);
					try {
						outputText.value += chunk; // 直接追加文本内容
						// const data = JSON.parse(chunk);
						// if (data.deepseekData) {
						// 	outputText.value += data.deepseekData; // 实时追加内容
						// }
					} catch (e) {
						console.error('解析失败:', e);
					}
				}
			} catch (error) {
				ElMessage.warning("请求失败");
			}
		}
	};

	const choosev3 = () => {
		selectedModel.value = 'deepseek-v3';
	};

	const chooser1 = () => {
		selectedModel.value = 'deepseek-r1';
	};
</script>

<template>
	<div class="container">
		<div class="left">
			<label for="modelSelect">选择模型:</label>
			<button @click="choosev3" class="model-button"
				:class="{ 'selected': selectedModel === 'deepseek-v3' }">deepseek-v3</button>
			<button @click="chooser1" class="model-button"
				:class="{ 'selected': selectedModel === 'deepseek-r1' }">deepseek-r1</button>
		</div>
		<div class="right">
			<div class="output">
				<label for="textOutput">生成的文本:</label>
				<textarea id="textOutput" v-model="outputText" rows="15" cols="50" readonly></textarea>
			</div>
			<div class="input">
				<label for="textInput">输入文本:</label>
				<textarea id="textInput" v-model="inputText" rows="4" cols="50"></textarea>
				<br><br>
				<button @click="generateText" class="generate-button">确定</button>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.container {
		display: flex;
		padding: 20px;
	}

	.left {
		flex: 1;
		padding-right: 20px;
	}

	.right {
		flex: 2;
		display: flex;
		flex-direction: column;
	}

	.output {
		flex: 2;
		margin-bottom: 10px;
		background-color: #f9f9f9;
		border: 1px solid #ccc;
		padding: 10px;
	}

	.input {
		flex: 1;
		background-color: #f9f9f9;
		border: 1px solid #ccc;
		padding: 10px;
	}

	label {
		display: block;
		margin-bottom: 5px;
	}

	textarea {
		display: block;
		margin-bottom: 10px;
		width: 100%;
	}

	.model-button {
		width: 100%;
		padding: 10px;
		font-size: 16px;
		cursor: pointer;
		background-color: #e0e0e0;
		color: #333;
		border: none;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.model-button.selected {
		background-color: #0056b3;
		color: white;
	}

	.model-button:hover {
		background-color: #007bff;
		color: white;
	}

	.generate-button {
		width: auto;
		align-self: flex-end;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
	}

	.generate-button:hover {
		background-color: #0056b3;
	}
</style>